import { Component } from 'react';
import { TabBar } from 'antd-mobile';
import { ReactComponent as HomeIcon } from '@/assets/svg/home.svg';
import { ReactComponent as HomeFill } from '@/assets/svg/home-fill.svg';
import { ReactComponent as ClassIcon } from '@/assets/svg/class.svg';
import { ReactComponent as ClassFill } from '@/assets/svg/class-fill.svg';
import { ReactComponent as ExplorationIcon } from '@/assets/svg/exploration.svg';
import { ReactComponent as ExplorationFill } from '@/assets/svg/exploration-fill.svg';
import { ReactComponent as LikeIcon } from '@/assets/svg/like.svg';
import { ReactComponent as LikeFill } from '@/assets/svg/like-fill.svg';
import { ReactComponent as Me } from '@/assets/svg/me.svg';
import { ReactComponent as MeFill } from '@/assets/svg/me-fill.svg';
import { history } from 'umi';
import styles from './index.less';

const tabBars = [
  {
    title: '首页',
    key: 'home',
    icon: HomeIcon,
    iconSelected: HomeFill,
  },
  {
    title: '发现',
    key: 'exploration',
    icon: ExplorationIcon,
    iconSelected: ExplorationFill,
  },
  {
    title: '学习',
    key: 'class',
    icon: ClassIcon,
    iconSelected: ClassFill,
  },
  {
    title: '收藏',
    key: 'like',
    icon: LikeIcon,
    iconSelected: LikeFill,
  },
  {
    title: '我的',
    key: 'me',
    icon: Me,
    iconSelected: MeFill,
  },
];

export default class index extends Component<any> {
  state = {
    selectedTab: 'home',
    hidden: false,
    fullScreen: false,
  };

  renderContent(key: String) {
    return <div className={styles.layout_class}>{this.props.children}</div>;
  }

  render() {
    return (
      <div
        style={
          this.state.fullScreen
            ? { position: 'fixed', height: '100%', width: '100%', top: 0 }
            : { height: '100vh' }
        }
      >
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          {tabBars.map((tabItem) => {
            return (
              <TabBar.Item
                title={tabItem.title}
                key={tabItem.key}
                icon={<tabItem.icon className={styles.icon_class} />}
                selectedIcon={
                  <tabItem.iconSelected className={styles.icon_class} />
                }
                selected={this.state.selectedTab === tabItem.key}
                onPress={() => {
                  history.push(`/${tabItem.key === 'home' ? '' : tabItem.key}`);

                  this.setState({
                    selectedTab: tabItem.key,
                  });
                }}
                data-seed="logId"
              >
                {this.renderContent(tabItem.key)}
              </TabBar.Item>
            );
          })}
        </TabBar>
      </div>
    );
  }
}
